<script type='text/javascript' src='<{$APP_PATH}>/includes/highcharts/js/highcharts.js'></script>
<style type="text/css">
    .inner .mall-manage{border:0;}
    .sub_menu .select{background:#08E5E5 !important;}
</style>
<div class="data-info" style="border:0;">
<div class="consumer-info">
    <div class="target" style="margin:0;margin-bottom:10px;">
        <div class="k-item">
            <h3 class="k-title">关键指标</h3>
            <ul>
                <li>
                    <div>
                        <div class="k-thick">今天关注人数</div>
                        <div class="k-thick"><{$count.today_carenum|default:'0'}></div>
                        <div>昨日：<span><{$count.yestoday_carenum|default:'0'}></span></div>
                    </div>
                </li>
                <div style="height:60px;background-color:#DBDBDB;width:1px;float:left;"></div>
                <li>
                    <div>
                        <div class="k-thick">取消关注人数</div>
                        <div class="k-thick"><{$count.today_uncarenum|default:'0'}></div>
                        <div>昨日：<span><{$count.yestoday_uncarenum|default:'0'}></span></div>
                    </div>
                </li>
                <div style="height:60px;background-color:#DBDBDB;width:1px;float:left;"></div>
                <li>
                    <div>
                        <div class="k-thick">净增关注人数</div>
                        <div class="k-thick"><{$count.today_carenum-$count.today_uncarenum}></div>
                        <div>昨日：<span><{$count.yestoday_carenum-$count.yestoday_uncarenum}></span></div>
                    </div>
                </li>
                <div style="height:60px;background-color:#DBDBDB;width:1px;float:left;"></div>
                <li>
                    <div>
                        <div class="k-thick">累计人数<span style="font-size:12px;color:#428BCA;">(接入起)</span></div>
                        <div class="k-thick">关注：<{$count.1}></div>
                        <div>取消：<span><{$count.0}></span></div>
                    </div>
                </li>
            </ul>
        </div>
    
    </div>
    <div class="detail-target" style="margin:0;">
        <div class="detail-message">
            <div class="sub_menu">
                <span class="sub-title">关键指标详解</span>
                <ul>
                    <li class="select" id="caremenu1"><a href="#" onclick="change_chart(1);return false;">新增人数</a></li>
                    <li id="caremenu2"><a href="" onclick="change_chart(2);return false;">取消关注人数</a></li>
                    <li id="caremenu3"><a href="" onclick="change_chart(3);return false;">净增人数</a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div>
                <h4 class="tread-title">趋势图&nbsp;&nbsp;<span style="font-size:12px;color:#428BCA;">最近30天</span></h4>
                <div class="trend-chart">
                    <div id="container1" style="width: 720px; height: 255px; margin: 0 auto"></div>
                </div>
            </div>
            <div>
                <h4 class="tread-title">详细数据</h4>
                <!-- <span class="more_menu">
                    <a href="#">导出CSV</a>
                </span> -->
                <div class="list-table">
                    <div class="wrapper">
                        <table style="table-layout: auto;" class="stable">
                            <colgroup span="5">
                                <col class="RefDate">
                                <col class="NewUser">
                                <col class="CancelUser">
                                <col class="NetUser">
                                <col class="CumulateUser">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th name="RefDate" class="hover enable">时间</th>
                                    <th name="NewUser" class="hover enable">新关注人数</th>
                                    <th name="CancelUser" class="hover enable">取消关注人数</th>
                                    <th name="NetUser" class="hover enable">净增关注人数</th>
                                    <th name="CumulateUser" class="hover enable">增长状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <{foreach item="detail" from=$detail}>
                                <tr>
                                    <td><div><{$detail.count_date}></div></td>
                                    <td><div><{$detail.care}></div></td>
                                    <td><div><{$detail.uncare}></div></td>
                                    <td><div><{$detail.factcare}></div></td>
                                    <td><div><{if $detail.factcare>0 }><span style="font-size:14px;color:green;font-weight:bold;">↑</span><{elseif $detail.factcare<0}><span style="font-size:14px;color:red;font-weight:bold;">↓</span><{else}>-<{/if}></div></td>
                                </tr>
                                <{/foreach}>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
var label=new Array(<{$chart_data1.label}>);
var data1=new Array(<{$chart_data1.value}>);
var data2=new Array(<{$chart_data1b.value}>);
var data3=new Array(<{$chart_data1c.value}>);
function change_chart(num){
	$("#caremenu1").attr("class","");
	$("#caremenu2").attr("class","");
	$("#caremenu3").attr("class","");
	$("#caremenu"+num).attr("class","select");
	create_chart(label,'data'+num);
}
function create_chart(labelvalue,datavalue){
	var chart;
	chart = new Highcharts.Chart({
	chart: {
		renderTo: 'container1',
		type: 'line',
		marginRight: 15,
		marginBottom: 30
	},
	title: {
		text: '',
		x: -20 //center
	},
	subtitle: {
		text: '',
		x: -20
	},
	xAxis: {
		categories: eval(labelvalue)
	},
	yAxis: {
		title: {
		text: ''
		},
		plotLines: [{
			value: 0,
			width: 1,
			color: '#808080'
		}]
	},
	tooltip: {
		formatter: function() {
		return '<b>'+ this.series.name +'</b><br/>'+
			this.y +'次';
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -10,
		y: 100,
		borderWidth: 0
	},
	plotOptions: {
		series: {
		showInLegend: false
		}
	},
	series: [{
		name: '关注量',
		data: eval(datavalue)
		}],
	colors: ['#009997', '#E6E6E6']
	});
}
$(function(){
	$(document).ready(function() {
		create_chart(label,data1);
	});
});
</script>